<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>用户注册</title>
  <link href="/user/css/updateUser.css" rel="stylesheet">
</head>

<body>
<div class="container">
  <h2>注册用户</h2>
  <form id="registerUser" method="post" th:action="@{/registerUser}">
    <div class="form-group"><label for="username">用户名：</label>
      <input id="username" name="username" required type="text" oninput="limitInputLength(this)">
    </div>

    <div class="form-group"><label for="password">密码：</label>
      <input id="password" name="password" required type="password" oninput="limitInputLength1(this)">
    </div>

<!--    <div class="form-group"><label for="confirm-password">确认密码：</label>-->
<!--      <input id="confirm-password" name="confirm-password" required type="password" oninput="limitInputLength1(this)" >-->
<!--    </div>-->

    <div class="form-group"><label for="email">邮箱：</label>
      <input id="email" name="email" required type="email" oninput="limitInputLength2(this)">
    </div>

    <button type="submit">注册</button>
  </form>
</div>
</body>
<script>
  function limitInputLength(input) {
    var maxLength = 7; // 限制为7个字符
    if (input.value.length > maxLength) {
      // 如果用户输入超过5个字符，弹出警告
      alert("警告：用户名输入框的字符数量已达到7位！ ");
      // 截断输入框的值
      input.value = input.value.slice(0, maxLength);
    }
  }

  function limitInputLength1(input) {
    var maxLength = 8; // 密码限制为8个字符
    if (input.value.length > maxLength) {
      // 如果用户输入超过5个字符，弹出警告
      alert("警告：密码输入框的字符数量已达到8位！ ");
      // 截断输入框的值
      input.value = input.value.slice(0, maxLength);
    }
  }
  function limitInputLength2(input) {
    var maxLength = 17; // 密码限制为8个字符
    if (input.value.length > maxLength) {
      // 如果用户输入超过5个字符，弹出警告
      alert("警告：邮箱输入框的字符数量已达到17位！ ");
      // 截断输入框的值
      input.value = input.value.slice(0, maxLength);
    }
  }

</script>
</html>